<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" media="all" th:href="@{/admin/layui/css/layui.css}">
    <link rel="stylesheet" media="all" th:href="@{/admin/style/admin.css}">
</head>
<body>
<div class="layui-form" lay-filter="layuiadmin-form" id="layuiadmin-form"
     style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label required">账号</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入账号"
                   autocomplete="off" class="layui-input" maxlength="20">
            <span>用于登录账号</span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">昵称</label>
        <div class="layui-input-block">
            <input type="text" name="nick" lay-verify="required" placeholder="请输入昵称"
                   autocomplete="off" class="layui-input" maxlength="20">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" id="password" lay-verify="required"
                   placeholder="请输入密码" autocomplete="off" class="layui-input" maxlength="20">
            <input type="checkbox" title="默认密码" lay-filter="box" id="box">
            <span>默认密码：<span id="pw"></span> </span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="Y" title="启用" checked>
            <input type="radio" name="status" value="N" title="禁用">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">角色</label>
        <div class="layui-input-block">
            <select name="roleId" lay-verify="required" id="roleId"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">备注</label>
        <div class="layui-input-block">
			<textarea type="text" name="remark" lay-verify="required" autocomplete="off"
                      class="layui-textarea" placeholder="请输入备注" maxlength="200"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <button class="layui-btn" lay-submit lay-filter="LAY-submit" id="LAY-submit">提交</button>
    </div>
</div>
</body>
<script th:src="@{/admin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'admin'], function () {
        var $ = layui.$, form = layui.form, admin = layui.admin;

        var password;
        // 获取字典表
        admin.req({
            url: '/sys/dict/queryDict/password'
            , done: function (res) {
                password = res.data.dictKey;
                doChecked(true);
                $('#pw').text(password);
            }
        });

        // 获取角色列表
        admin.req({
            url: '/sys/role/list'
            , done: function (res) {
                var html = '';
                $.each(res.data, function (index, data) {
                    html += '<option value="' + data.id + '">' + data.name + '</option> ';
                });
                $('#roleId').html(html);
                form.render('select');
            }
        });

        // 复选框点击
        form.on('checkbox(box)', function (data) {
            doChecked(data.elem.checked);
        });

        // 修改密码
        function doChecked(type) {
            $('#box').prop('checked', type);
            if (type) {
                $('#password').val(password);
            } else {
                $('#password').val("");
            }
            form.render('checkbox');
        }
    })
</script>
</html>